<template>
  <div class="div-main">
    <div>
      <mt-header title="订单支付" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div class="order-number">订单号：{{ddbh}}</div>
    <div class="order-info">{{mpmc}}:{{count}}×{{mpjg}}</div>
    <div class="contacts-info">
      <div>取票人</div>
      <div>姓名：{{mc}}</div>
      <div>电话：{{dh}}</div>
    </div>
    <div class="bottom">
      <div>
        <span class="span-payonline">订单总价</span>
        <span class="span-symbol">¥</span>
        <span class="span-money">{{hj}}</span>
      </div>
      <div @click="pay()">付款</div>
      <div style="clear: both;"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mpmc: this.$route.query.mpmc,
      mpjg: this.$route.query.mpjg,
      count: this.$route.query.count,
      mc: this.$route.query.mc,
      dh: this.$route.query.dh,
      ddbh: this.$route.query.ddbh,
      ddid: this.$route.query.ddid,
      hj: this.$route.query.hj,
      state: this.$route.query.state,
      xdsj: this.$route.query.xdsj,
      zfsx: this.$route.query.zfsx
    };
  },
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  
  methods: {
    goBack() {
      history.go(-1);
    },
    pay() {
      this.$router.push({
        path: "/pay",
        query: {
          ddbh: this.$route.query.ddbh
        }
      });
    }
  }
};
</script>
<style scoped>
.div-main {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
.order-number {
  margin: 5px;
  font-size: 18px;
}
.order-info {
  margin: 5px;
  font-size: 17px;
}
.contacts-info {
  border-top: 10px solid #eeeeee;
}
.contacts-info :nth-child(1) {
  font-size: 20px;
  text-align: center;
}
.contacts-info :nth-child(2) {
  font-size: 20px;
  margin: 5px;
}
.contacts-info :nth-child(3) {
  font-size: 20px;
  margin: 5px;
}
.bottom {
  position: absolute;
  z-index: 82;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 1rem;
}
.span-payonline {
  color: #999;
  font-size: 13px;
}
.span-symbol {
  color: #ff9800;
  font-size: 13px;
}
.span-money {
  color: #ff9800;
  font-size: 20px;
}
.bottom > :nth-child(1) {
  float: left;
  width: 50%;
  height: 100%;
  padding-top: 20px;
  text-align: center;
}

.bottom > :nth-child(2) {
  float: left;
  width: 50%;
  height: 100%;
  background: #ff9800;
  color: #fff;
  font-size: 20px;
  padding-top: 18px;
  text-align: center;
}
</style>
